<template>
	<div class="reg">
		<div class="regarea">
			<div class="head">
				<h3>欢迎注册</h3>
				<p>
					<span style="font-size: 14px; color: #9b9b9b">已有账号?</span>nbsp<span
						style="font-size: 14px; color: #0f3cf2; cursor: pointer" @click="gologin">登录</span>
				</p>
			</div>
			<div class="inputarea">
				<el-form ref="form" label-width="80px">
					<el-form-item label="用户名">
						<el-input placeholder="请设计用户名" v-model="uname"></el-input>
					</el-form-item>
					<el-form-item label="昵称">
						<el-input placeholder="请填写昵称" v-model="nickname"></el-input>
					</el-form-item>
					<el-form-item label="密码">
						<el-input placeholder="请设计登录密码" show-password v-model="passward"></el-input>
					</el-form-item>
					<el-form-item label="验证码" style="width: 100%">
						<el-form :inline="true">
							<el-form-item>
								<el-input placeholder="验证码"></el-input>
							</el-form-item>
							<el-form-item>
								<button class="sendbutton">获取验证码</button>
							</el-form-item>
						</el-form>
					</el-form-item>
				</el-form>
				<button class="sumbbit" @click="reg">注册</button>
				<div class="xieyi">
					<el-radio-group size="mini" v-model="radio">
						<el-radio label="1"><span style="font-size: 5px">阅读并接受<span
									style="color: #2e58ff">《华为用户协议》</span>及<span
									style="color: #2e58ff">《华为隐私权保护声明》</span></span></el-radio>
					</el-radio-group>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		Reg
	} from "../https/api";
	export default {
		name: "reg",
		data() {
			return {
				radio: "0",
				uname: "",
				nickname: "",
				passward: "",
			};
		},
		methods: {
			async reg() {
				if (!this.uname) {
					this.$message({
						showClose: true,
						message: '用户名为空',
						type: 'warning'
					});
					return
				}
				if (!this.nickname) {
					this.$message({
						showClose: true,
						message: '昵称不能为空',
						type: 'warning'
					});
					return
				}
				if (!this.passward) {
					this.$message({
						showClose: true,
						message: '密码不能为空',
						type: 'warning'
					});
					return
				}
				if (this.radio == "0") {
					this.$message({
						showClose: true,
						message: '请勾选协议',
						type: 'warning'
					});
					return
				}
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});

				const res = await Reg({
					nickname: this.nickname,
					username: this.uname,
					password: this.passward,
					code: 100
				})
				loading.close();
				if (res.code == 1) {
					this.$message({
						message: "注册成功",
						type: "success"
					});
					this.$router.push({
						path: '/login'
					})
				} else {
					this.$message({
						message: "注册失败",
						type: "warning"
					});
				}
			},
			gologin() {
				this.$router.push({
					path: "/login",
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.reg {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		height: calc(100vh);
		background: url(../../public/images/reg_back.jpg);
		background-size: cover;
		background-repeat: no-repeat;

		.regarea {
			position: absolute;
			right: 139px;
			top: 10%;
			width: 480px;
			height: 550px;
			background: rgba(255, 255, 255, 0.9);
			border-radius: 12px;
			overflow: hidden;

			.head {
				width: 90%;
				height: 25px;
				margin: 10% auto 0 auto;
				font-size: 36px;
				color: #000;
				padding-bottom: 4px;
			}

			.inputarea {
				width: 90%;
				height: 62%;
				margin: 20% auto 0 auto;
				padding-bottom: 4px;

				.sumbbit {
					width: 98%;
					display: block;
					height: 50px;
					font-size: 16px;
					font-weight: 700;
					border: 0;
					cursor: pointer;
					margin: 0 0 0 5%;
					background: #bdcefc;
					border-radius: 25px;
					color: #fff;

					&.hover {
						background: #bdcefc;
					}
				}

				.xieyi {
					width: 65%;
					height: 25px;
					margin: 1% auto 0 auto;
					display: flex;
					align-items: center;
				}
			}
		}
	}

	.sendbutton {
		width: 125px;
		height: 40px;
		border-radius: 4px;
		background: #fff;
		border: 1px solid #e0e0e0;
		font-size: 12px;
		color: #333;
		letter-spacing: 0;
		text-align: center;
	}
</style>
